<template>
  <view class="bg-white p-4">
    <view class="flex justify-between">
      <block v-for="(item, idx) in sensorList" :key="idx">
        <view v-show="data[item.value]">
          <view>
            <image :src="`/static/icons/${item.icon}.png`" class="icon"></image>
          </view>
          <view class="mt-2">
            <text class="text-gray-600 ">
              {{ item.label }}
            </text>
          </view>
          <view class="mt-2">
            <text class="text-gray-900">
              {{ data[item.value] }}
            </text>
            <text class="text-gray-600">
              {{ item.unit }}
            </text>
          </view>
        </view>
      </block>
    </view>
    <view class="py-8">
      <view
        class="relative flex items-center justify-center"
        style="height:566rpx"
      >
        <view class="flex w-full items-center justify-between absolute top-0">
          <view>
            <view class="py-2">
              <text class="text-gray-600">
                室内
                <text class="text-gray-900">{{ temp }}</text>
                ℃
              </text>
            </view>
            <view class="py-2">
              <text class="text-gray-600">
                室外
                <text class="text-gray-900">{{ temp }}</text>
                ℃
              </text>
            </view>
          </view>
          <!-- <view>
            <text class="text-green-400 text-base font-bold">运行中</text>
          </view> -->
        </view>
        <view class="absolute">
          <CmdProgress
            type="dashboard"
            :percent="80"
            status="active"
            :show-info="false"
            :stroke-width="1"
            stroke-color="#0AC7B9"
            width="248"
          ></CmdProgress>
        </view>
        <view
          class="rounded-full shadow flex items-center justify-between relative"
          style="width:364rpx;height:364rpx"
        >
          <view class="absolute w-full left-0 text-center" style="top:60rpx">
            <text class="text-gray-500 ">
              {{ activeItem.label }}
            </text>
          </view>
          <view class="absolute w-full left-0 text-center" style="bottom:40rpx">
            <image
              :src="activeIconPath"
              style="width:48rpx;height:48rpx"
            ></image>
          </view>
          <view>
            <image
              class="p-4"
              src="/static/icons/arrow-left.png"
              style="width:34rpx;height:34rpx;"
              @click="handleTempChange('sub')"
            ></image>
          </view>
          <view class="text-teal-400">
            <text class="text-4xl font-bold">
              {{ data.Temp | tempFix }}
            </text>
            <text class="text-base">
              ℃
            </text>
          </view>
          <image
            class="p-4"
            src="/static/icons/arrow-right.png"
            style="width:34rpx;height:34rpx"
            @click="handleTempChange('add')"
          ></image>
        </view>
      </view>

      <view class="flex justify-center">
        <view @click="handleSwitchPower">
          <image
            v-if="data.On == 1"
            src="/static/icons/on.png"
            style="width:80rpx;height:80rpx"
          ></image>
          <image
            v-else
            src="/static/icons/off.png"
            style="width:80rpx;height:80rpx"
          ></image>
        </view>
      </view>
    </view>
    <view class="flex items-center py-4">
      <image
        src="/static/icons/wind-slow.png"
        style="width:34rpx;height:34rpx"
      ></image>
      <view class="flex-1">
        <slider
          value="2"
          min="1"
          max="5"
          activeColor="#0AC7B9"
          @change="sliderChange"
        ></slider>
      </view>
      <image
        src="/static/icons/wind-fast.png"
        style="width:34rpx;height:34rpx"
      ></image>
    </view>

    <view class="flex justify-between ">
      <block v-for="(item, index) in buttonList" :key="index">
        <view
          class="button p-4"
          :class="{
            active: index === activeIndex,
          }"
          @click="this.activeIndex = index"
        >
          <view>
            <image
              :src="
                `/static/icons/${item.icon}${
                  index === activeIndex ? '-active' : ''
                }.png`
              "
              style="width:60rpx;height:60rpx"
            ></image>
          </view>
          <view class="mt-3">
            <text>{{ item.label }}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { CmdProgress } from "@/components/cmd-progress/cmd-progress.vue";
import { mapGetters } from "vuex";

export default {
  components: { CmdProgress },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      data: {
        targetTemp: "26",
        AirVolume: 1,
      },
      temp: 0,
      jsonObject: {},
      // activeIndex: 0,

      sensorList: [
        {
          icon: "pm25",
          label: "PM2.5",
          value: "PM25",
          unit: "ug/m³",
        },
        {
          icon: "tvoc",
          label: "TVOC",
          value: "VOC",
          unit: "ppm",
        },
        {
          icon: "co2",
          label: "CO2",
          value: "CO2",
          unit: "ppm",
        },
        {
          icon: "humi",
          label: "湿度",
          value: "Humi",
          unit: "%",
        },
      ],

      buttonList: [
        {
          icon: "filter",
          label: "自动",
          value_wind: 0,
          value_hot: 1,
          value_air: 3,
        },
        {
          icon: "cold",
          label: "制冷",
          value_wind: 1,
          value_air: 2,
        },
        {
          icon: "hot",
          label: "制热",
          value_wind: 2,
          value_air: 1,
        },
        {
          icon: "filter",
          label: "净化",
          value_wind: 3,
          value_air: 0,
        },
        {
          icon: "humidify",
          label: "除湿",
          value_wind: 4,
          value_air: 7,
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      projectId: "projectId",
    }),
    activeIndex: {
      get() {
        return this.data?.mode || 0;
      },
      set(val) {
        this.$set(this.data, "mode", val);
        this.jsonObject = {
          deviceProperty: "Mode",
          value: this.currentMode,
          mode: this.currentMode,
          Mode: this.currentMode,
        };
      },
    },
    activeItem() {
      return this.buttonList[this.activeIndex] || {};
    },
    currentMode() {
      const valueMap = {
        多联机空调: "value_air",
        新风全热交换机: "value_hot",
        新风空调一体机: "value_wind",
      };

      return this.activeItem[valueMap[this.value.type]];
    },
    activeIconPath() {
      return `/static/icons/${
        this.buttonList[this.activeIndex].icon
      }-active.png`;
    },
  },
  created() {
    console.log(this.value);
    this.getDetail();
  },
  filters: {
    tempFix(temp) {
      if (temp) {
        return temp.toFixed(0)
      }
      return '--'
    }
  },
  methods: {
    handleSwitchPower() {
      if (this.data.On == 1) {
        this.data.On = 0;
      } else {
        this.data.On = 1;
      }
      this.jsonObject = {
        deviceProperty: "On",
        value: String(this.data.On),
      };
    },
    handleTempChange(type) {
      if (!this.data.Temp) {
        this.data.Temp = 16;
      }
      if (type === "add") {
        this.data.Temp += 1;
      } else if (type === "sub") {
        this.data.Temp -= 1;
      }
      this.jsonObject = {
        deviceProperty: "Temp",
        value: String(this.data.Temp),
      };
    },
    sliderChange(e) {
      this.data.AirVolume = e.detail.value;
      this.jsonObject = {
        deviceProperty: "AirVolume",
        value: String(this.data.AirVolume),
      };
    },
    async getDetail() {
      const res = await this.$store.dispatch("device/fetchDeviceDetail", {
        deviceId: this.value.id,
        deviceType: this.value.type,
        projectId: this.projectId,

        // deviceId: "08F1EAEE0F97.100.7",
        // deviceType: "新风空调一体机",
        // projectId: "LNH-ZKJW",
      });
      this.temp = res.result?.Temp;
      this.data = res.result;
    },
  },
  watch: {
    jsonObject: {
      async handler(val) {
        console.log(val);
        uni.showToast({ icon: 'loading' })
        await this.$store.dispatch("device/control", {
          // ...this.data,
          projectId: this.data.projectId,
          nodeId: this.value.node,
          jsonObject: {
            // ...val,
            deviceProperty: val.deviceProperty,
            value: String(val.value),
            action: "control",
            deviceId: this.value.id,
          },
        });
        uni.showToast({ icon: 'success' })
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.icon {
  width: 36rpx;
  height: 36rpx;
}

.button {
  color: #808695;
  &.active {
    color: #0ac7b9;
  }
}
</style>
